<template>
	<view>
		<view style="margin-top: 160rpx; display: flex; justify-content: flex-start; align-items: center; width: 100%;">
			<view style="height: 80rpx; width: 580rpx; box-shadow: 2px 2px 5px #f2f6fc; border-radius: 10rpx; margin-left: 25rpx; display: flex; justify-content: flex-start; align-items: center; font-size: 40rpx;">
				<view style="margin-left: 20rpx;" class="cuIcon-search"></view>
				<input placeholder-style="font-size: 25rpx;" style="width: 440rpx;"  placeholder="请输入搜索内容..."/>
				<view style="margin-left: 20rpx;" class="cuIcon-voice"></view>
			</view>
			<view style="font-size: 40rpx; margin-left: 20rpx;" class="cuIcon-notice"></view>
			<view style="font-size: 40rpx; margin-left: 10rpx;" class="cuIcon-cart"></view>
		</view>
		
		<view style="margin-top: 20rpx;">
			<u-line color="#ebeef5" />
		</view>
		<view>
			<u-dropdown>
				<u-dropdown-item v-model="value1" title="综合" :options="options1"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="区域" :options="options2"></u-dropdown-item>
			</u-dropdown>
		</view>
		<view style="margin-top: 20rpx; display: flex; justify-content: space-around;">
					<view style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
						<image mode="aspectFill" style="height: 160rpx; width: 160rpx;" src="https://bkimg.cdn.bcebos.com/pic/3812b31bb051f819ef8fa29ed4b44aed2f73e7b8"></image>
						<view style="margin-top: 10rpx;">全部</view>
					</view>
					<view style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
						<image mode="aspectFill" style="height: 160rpx; width: 160rpx;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fi2%2F352183601%2FO1CN01I6z4J11cTIx1UPZSf_%21%21352183601.png&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688135045&t=5bbc3b95e8faa5a693b3444d0f7ef0f8"></image>
						<view style="margin-top: 10rpx;">鞋子</view>
					</view>
					<view style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
						<image mode="aspectFill" style="height: 160rpx; width: 160rpx;" src="https://img0.baidu.com/it/u=4081159054,518071252&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></image>
						<view style="margin-top: 10rpx;">服装</view>
					</view>
					<view style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
						<image mode="aspectFill" style="height: 160rpx; width: 160rpx;" src="https://imgservice.suning.cn/uimg1/b2c/image/LpTnbMAxZFO-dCkYfDrT4Q.jpg_800w_800h_4e"></image>
						<view style="margin-top: 10rpx;">球类</view>
					</view>
		</view>
		
		
		
<view style="display: flex;">
  <view style="margin-top: 20rpx; display: flex; justify-content: flex-start; flex-wrap: wrap;">
    <view style="height: 520rpx; box-shadow: 2px 2px 5px #f2f6fc; border-radius: 10rpx; width: 360rpx; margin-top: 10rpx; margin-left: 10rpx; display: flex; flex-direction: column; justify-content: center; align-items: center;">
      <view>闲物置换</view>
      <image mode="aspectFill" style="width: 300rpx; border-radius: 10rpx; height: 300rpx; margin-top: 20rpx;" src="https://s2.loli.net/2023/04/05/h8rpsT9P61IEm4S.png"></image>
      <view style="width: 100%; margin-top: 20rpx;">
        <view style="margin-left: 30rpx;">
          <view style="font-size: 25rpx; color: #606266;">球鞋</view>
          <view style="font-size: 25rpx; color: #909399; margin-top: 10rpx;">20分钟前</view>
        </view>
      </view>
      <view style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
        <view style="font-size: 25rpx; color: #606266; margin-left: 30rpx;">原厂顶级</view>
        <button class="cu-btn round bg-blue" style="font-size: 20rpx; height: 40rpx; width: 160rpx; margin-right: 30rpx;">一键转发</button>
      </view>
    </view>
  </view>

  <view style="margin-top: 20rpx; display: flex; justify-content: flex-start; flex-wrap: wrap;">
    <view style="height: 520rpx; box-shadow: 2px 2px 5px #f2f6fc; border-radius: 10rpx; width: 360rpx; margin-top: 10rpx; margin-left: 10rpx; display: flex; flex-direction: column; justify-content: center; align-items: center;">
      <view>闲物置换</view>
      <image mode="aspectFill" style="width: 300rpx; border-radius: 10rpx; height: 300rpx; margin-top: 20rpx;" src="https://s2.loli.net/2023/04/05/tqe9nL2A6gvlF8P.jpg"></image>
      <view style="width: 100%; margin-top: 20rpx;">
        <view style="margin-left: 30rpx;">
          <view style="font-size: 25rpx; color: #606266;">球鞋</view>
          <view style="font-size: 25rpx; color: #909399; margin-top: 10rpx;">20分钟前</view>
        </view>
      </view>
      <view style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
        <view style="font-size: 25rpx; color: #606266; margin-left: 30rpx;">原厂顶级</view>
        <button class="cu-btn round bg-blue" style="font-size: 20rpx; height: 40rpx; width: 160rpx; margin-right: 30rpx;">一键转发</button>
      </view>
    </view>
  </view>
</view>
<view style="display: flex;">
  <view style="margin-top: 20rpx; display: flex; justify-content: flex-start; flex-wrap: wrap;">
    <view style="height: 520rpx; box-shadow: 2px 2px 5px #f2f6fc; border-radius: 10rpx; width: 360rpx; margin-top: 10rpx; margin-left: 10rpx; display: flex; flex-direction: column; justify-content: center; align-items: center;">
      <view>闲物置换</view>
      <image mode="aspectFill" style="width: 300rpx; border-radius: 10rpx; height: 300rpx; margin-top: 20rpx;" src="https://s2.loli.net/2023/04/05/g6ehocSxiYFkVLw.jpg"></image>
      <view style="width: 100%; margin-top: 20rpx;">
        <view style="margin-left: 30rpx;">
          <view style="font-size: 25rpx; color: #606266;">球鞋</view>
          <view style="font-size: 25rpx; color: #909399; margin-top: 10rpx;">20分钟前</view>
        </view>
      </view>
      <view style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
        <view style="font-size: 25rpx; color: #606266; margin-left: 30rpx;">原厂顶级</view>
        <button class="cu-btn round bg-blue" style="font-size: 20rpx; height: 40rpx; width: 160rpx; margin-right: 30rpx;">一键转发</button>
      </view>
    </view>
  </view>

  <view style="margin-top: 20rpx; display: flex; justify-content: flex-start; flex-wrap: wrap;">
    <view style="height: 520rpx; box-shadow: 2px 2px 5px #f2f6fc; border-radius: 10rpx; width: 360rpx; margin-top: 10rpx; margin-left: 10rpx; display: flex; flex-direction: column; justify-content: center; align-items: center;">
      <view>闲物置换</view>
      <image mode="aspectFill" style="width: 300rpx; border-radius: 10rpx; height: 300rpx; margin-top: 20rpx;" src="https://s2.loli.net/2023/04/05/y6cpfXNCPr1mouA.jpg"></image>
      <view style="width: 100%; margin-top: 20rpx;">
        <view style="margin-left: 30rpx;">
          <view style="font-size: 25rpx; color: #606266;">球鞋</view>
          <view style="font-size: 25rpx; color: #909399; margin-top: 10rpx;">20分钟前</view>
        </view>
      </view>
      <view style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
        <view style="font-size: 25rpx; color: #606266; margin-left: 30rpx;">原厂顶级</view>
        <button class="cu-btn round bg-blue" style="font-size: 20rpx; height: 40rpx; width: 160rpx; margin-right: 30rpx;">一键转发</button>
      </view>
    </view>
  </view>
</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: 1,
				value2: 2,
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
